<template>
  <div class="custom-input">
    <div>
      <label v-if="label">{{ label }}</label
      >:
    </div>
    <input
      :type="type"
      :placeholder="placeholder"
      :value="modelValue"
      @input="handleInput"
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

// 定义传入组件的props
const props = defineProps({
  modelValue: String,
  label: String,
  type: {
    type: String,
    default: "text",
  },
  placeholder: String,
});

// 定义事件
const emit = defineEmits(["update:modelValue"]);

// 处理输入事件
const handleInput = (e) => {
  emit("update:modelValue", e.target.value);
};
</script>

<style scoped lang="less">
.custom-input {
  display: flex;
  justify-content: center;
  align-items: center;

  input {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  label {
    margin-bottom: 0.5em;
    font-weight: bold;
  }
}
</style>
